<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/public/head.jsp" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="stylesheet" href="${system}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${system}/static/css/by.css">
    <title>借款</title>
</head>
<style>
    .mui-popup-backdrop {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;

        opacity: 0;
        background: rgba(0, 0, 0, .4);
    }

    .mui-popup-backdrop.mui-active {
        opacity: 1;
    }

    .mui-popup {
        position: fixed;
        z-index: 10000;
        top: 50%;
        left: 50%;

        display: none;
        overflow: hidden;

        width: 270px;

        -webkit-transition-property: -webkit-transform, opacity;
        transition-property: transform, opacity;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.185);
        transform: translate3d(-50%, -50%, 0) scale(1.185);
        text-align: center;

        opacity: 0;
        color: #000;
        border-radius: 13px;
    }

    .mui-popup.mui-popup-in {
        display: block;

        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);

        opacity: 1;
    }

    .mui-popup.mui-popup-out {
        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);

        opacity: 0;
    }

    .mui-popup-inner {
        position: relative;

        padding: 15px;

        border-radius: 13px 13px 0 0;
        background: rgba(255, 255, 255, .95);
    }

    .mui-popup-inner:after {
        position: absolute;
        z-index: 15;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 1px;

        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;

        background-color: rgba(0, 0, 0, .2);
    }

    .mui-popup-title {
        font-size: 18px;
        font-weight: 500;

        text-align: center;
    }

    .mui-popup-title + .mui-popup-text {
        font-family: inherit;
        font-size: 14px;

        margin: 5px 0 0;
    }

    .mui-popup-buttons {
        position: relative;

        display: -webkit-box;
        display: -webkit-flex;
        display: flex;

        height: 44px;

        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .mui-popup-button {
        font-size: 17px;
        line-height: 44px;

        position: relative;

        display: block;
        overflow: hidden;

        box-sizing: border-box;
        width: 100%;
        height: 44px;
        padding: 0 5px;

        cursor: pointer;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;

        color: #007aff;
        background: rgba(255, 255, 255, .95);

        -webkit-box-flex: 1;
    }

    .mui-popup-button:after {
        position: absolute;
        z-index: 15;
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;

        display: block;

        width: 1px;
        height: 100%;

        content: '';
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;

        background-color: rgba(0, 0, 0, .2);
    }

    .mui-popup-button:first-child {
        border-radius: 0 0 0 13px;
    }

    .mui-popup-button:first-child:last-child {
        border-radius: 0 0 13px 13px;
    }

    .mui-popup-button:last-child {
        border-radius: 0 0 13px 0;
    }

    .mui-popup-button:last-child:after {
        display: none;
    }

    .mui-popup-button.mui-popup-button-bold {
        font-weight: 600;
    }

    .mui-popup-input input {
        font-size: 14px;

        width: 100%;
        height: 26px;
        margin: 15px 0 0;
        padding: 0 5px;

        border: 1px solid rgba(0, 0, 0, .3);
        border-radius: 0;
        background: #fff;
    }

    .mui-plus.mui-android .mui-popup-backdrop {
        -webkit-transition-duration: 1ms;
        transition-duration: 1ms;
    }

    .mui-plus.mui-android .mui-popup {
        -webkit-transition-duration: 1ms;
        transition-duration: 1ms;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);
    }

</style>
<body>
<div class="container">
    <input type="hidden" id="balance" value="${balance}">
    <input type="hidden" id="interestRate" value="${interestRate}">
    <input type="hidden" id="ing" value="${quota}">
    <div class="row">
        <div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <div class="form-group">
                <h4>借多少</h4>
                <div class="number_amount">
                    <label>￥</label>
                    <input type="number" placeholder="5000起借" maxlength="5" id="money">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <div class="form-group">
                <h4>借多久</h4>
                <div class="number_amount">
                    <select onchange="select()" id="cycle"
                            style="width:100%; height:100%; background-color:white; border:none; border-bottom:1px solid #eee; font-size:16px;">
                        <c:forEach var="cycle" items="${allCycle}">
                            <option value="${cycle.cycle_id}">${cycle.cycle_name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <div class="form-group" style="border-bottom:1px solid #eee;">
                <div style="margin-bottom:5px;">
                    <span style="font-size:18px;">总利息</span>
                    <span id="ra" style="float:right; font-size:16px; color:gray;">0.00</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <div class="form-group" style="border-bottom:1px solid #eee;">
                <div style="margin-bottom:5px;">
                    <span style="font-size:18px;">每月还款日</span>
                    <span style="float:right; font-size:16px; color:gray;">每月<span id="day"></span>号</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <div class="form-group">
                <input type="hidden" class="getId" name="id">
                <h4>收款账户</h4>
                <div class="number_amount">
                    <span style="font-size:16px; color:gray; float:right;">${bankInfo.auth_bank_name}(${bankInfo.auth_bank_number})</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="_submit col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <input type="button" id="sub" value="借款" class="btn btn-primary submit-amount">
        </div>
    </div>
</div>
</div>
<div class="mask"></div>
<script src="${system}/static/js/mui.min.js"></script>
<script src="${system}/static/js/mui.js"></script>
</body>
<script>


    var cycle = ""; //周期
    $(function () {
        $("#day").text(new Date().getDate());    //每月还款日就是借款日
        ajax("${system}/loan/getCycle", "", "json", "post", false, function (data) {
            console.log(data);
            cycle = data;
        }, function (error) {
            console.log(error)
            mui.alert("获取分期时出现异常,请稍后再试!", "提示", "OK", function () {
                window.location.href = "${system}/loan/quota"
            });
        });
    });


    //输入框的值改变时
    $("#money").bind("input propertychange", function () {
        var balance = parseInt($("#balance").val());    //已用额度
        var ing = parseInt($("#ing").val());  //总额度
        var money = isNaN(parseInt($("#money").val())) ? 0 : parseInt($("#money").val());    //借金额
        var yu = ing - balance; //现在剩余的钱
        //剩余额度不足5000时
        if (yu < 5000) {
            mui.alert("您的额度已不足", "提示", "OK", function () {
                window.location.href = "${system}/loan/quota"
            });
        }
        //借款小于或等于剩余余额时
        if (money <= yu) {
            if (money >= 5000 && money <= yu) {
                rate(money);
            } else {
                rate(0);
            }
        }
        //如果money大于剩余余额时
        if (money > yu) {
            mui.alert("借款金额需小于或等于可借额度", "提示", "OK", function () {
                $("#money").val(yu);
                rate(parseInt($("#money").val()));
            });
        }
    });


    function select() {
        var balance = parseInt($("#balance").val());    //已用额度
        var ing = parseInt($("#ing").val());  //总额度
        var money = isNaN(parseInt($("#money").val())) ? 0 : parseInt($("#money").val());    //借金额
        var yu = ing - balance; //现在剩余的钱
        if (money == 0 || money < 5000) {
            mui.alert("借款必须大于等于5000", "提示", "OK", function () {
                $("#money").val(5000);
                rate(parseInt($("#money").val()));
            });
        } else {
            rate(money);
        }
    }

    var prohibit=true;
    $("#sub").click(function () {
        if (prohibit==false){
            mui.alert("请勿重新提交，否则申请失效！","提示","OK");
            return;
        }
        prohibit=false;
        var balance = parseInt($("#balance").val());    //已用额度
        var ing = parseInt($("#ing").val());  //总额度
        var money = isNaN(parseInt($("#money").val())) ? 0 : parseInt($("#money").val());    //借金额
        var yu = ing - balance; //现在剩余的钱
        if (money > yu) {
            mui.alert("借款金额需小于或等于可借额度", "提示", "OK", function () {
                $("#money").val(yu);
                rate(parseInt($("#money").val()));
                prohibit=true;
                return;
            });
        }
        if (money == 0 || money < 5000) {
            mui.alert("借款必须大于等于5000", "提示", "OK", function () {
                $("#money").val(5000);
                rate(parseInt($("#money").val()));
                prohibit=true;
            });
        }
        //借款需大于5000,并且借款要小于或等于余额
        if (money >= 5000 && money <= yu) {
            var data = {"cycle_id": $("#cycle").val(), "bs_loan": money};
            //借款
            ajax("${system}/loan/bystages.do", data, "json", "post", true, function (data) {
                switch (data) {
                    case 106:
                        mui.alert("您的额度不足5000", "提示", "OK", function () {
                            window.location.href = "${system}/loan/quota";
                        });
                        break;
                    case 102:
                        mui.alert("借款成功","提示","OK",function () {
                            window.location.href = "${system}/order/loanOrder";
                        });
                        break;
                    case 101:
                        mui.toast("借款失败请稍后再试");
                        prohibit=true;
                        break;
                    case 104:
                        window.location.href = "${system}/order/loanOrder";
                        break;
                    case 105:
                        mui.alert("无额度", "提示", "OK");
                        break;
                }
            }, function (error) {
                console.log(error);
                mui.alert("提交借款申请时出现问题,请稍后再试", "提示", "OK");
                prohibit=true;
            });
        }
    });


    //计算利息
    function rate(money) {
        var c = $("#cycle").val();  //周期id
        var rate = $("#interestRate").val();    //利率
        if (cycle != null || cycle != "") {
            var r = 0.00;
            for (var k = 0; k < cycle.length; k++) {
                var v = cycle[k].cycle_id; //周期
                if (v == c) {
                    //计算利息的公式,利息=本金*利率*周期/100
                    r = (money * rate * cycle[k].cycle_number) / 100;
                    break;
                }
            }
            if (isNaN(r)) {
                $("#ra").text("0.00");
            } else {
                $("#ra").text(r.toFixed(2));
            }
        }
    }


</script>
</html>